Teaser und Open Graphs
Letztes Update:
12. Oktober 2023
Entwurf – Inhalt noch in Arbeit
Symbolbild
Wie hilft dieses Element den Nutzern?
Teaser sind zusammengehörige Informationen, welche Interesse wecken, Lust auf mehr machen sollen und auf weitere Inhalte verlinken. Nutzer können sich bei Interesse durch Interaktion zu den angeteaserten Informationen/Interaktionen navigieren.
Hinterlegt mit einem Link oder einer Interaktionsmöglichkeit führen sie zu weiteren Inhalten. Dies kann durch Absprung auf eine weitere Seite passieren oder z.B. durch Öffnen von Eingabefeldern “an Ort und Stelle”.
Wann kommt dieses Element zum Einsatz?
Teaser können verschiedene Formen haben:
- ausschließlich Text mit Verlinkung der außerhalb eines Lauftextes als Teaser dargestellt wird (z.B. Open Graphs, Meta Tags die als Suchergebnis auf Suchmaschinen präsentiert wird,…)
- Text, Bild und Verlinkung (z.B. Teaser auf spezielle Themenseiten,…)
- Text, Bild, Verlinkung und Interaktionselemente/Funktionen (z.B. „merken“, „teilen“, „dem Warenkorb hinzufügen“)
- Text und Button oder Eingabefeld – öffnet bei Klick/Tap weitere Interaktionsmöglichkeiten
UX Konzeption
- Verlinkt wird immer der gesamte Teaser – nie ausschließlich ein einzelnes Element wie z.B. nur der Text oder ein zusätzliche Button innerhalb des Teasers
- Bildfüllende Teaser die beispielsweise in einem Slider/Karussell einzeln dargestellt werden werden mit einem zusätzlichen Button ergänzt damit sie leichter als Teaser erkennbar sind.
- werden mehrere einzelne Teaser angezeigt, benötigen diese keine zusätzlichen Buttons um die Verlinkung darzustellen. Der gesamte Teaser an sich muss so gestaltet sein, dass die Verlinkung auch ohne zusätzlichem Button erkenntlich ist.
- Teaser die per Klick/Tap weitere Interaktionsmöglichkeiten öffnen müssen je Einzelfall gesondert definiert werden.
Strukturierte Daten / Schema.org
Auf den Plattformen und in E-Mail Nachrichten wie beispielsweise Newslettern kommen Schemata für strukturierte Daten zum Einsatz. Diese ermöglichen unter anderem Anwendungen von Google, Microsoft, Pinterest etc. mittels dieser Informationen reichhaltigere und für die Nutzer passende Inhalte anzuzeigen.
Einführung in das Markup für strukturierte Daten in der Google Suche
Details zu den für Plattformen und E-Mail Nachrichten zu verwendende Schemata:
- Meta Tags und Strukturierte Daten
- https://schema.org/
- Einführung in das Markup für strukturierte Daten in der Google Suche auf developers.google.com
Weiterführendes zu Zugänglichkeit und Barrierefreiheit
Richtlinie für barrierefreie Webinhalte (WCAG)
Die Richtlinien für barrierefreie Webinhalte (WCAG) beinhaltet Prinzipien, Richtlinien und Erfolgskriterien um Webinhalte barrierefreier zu gestalten. Die Grundlagen zur Zugänglichkeit sind in der Guideline eingearbeitet. Details finden sich unter Richtlinien für barrierefreie Webinhalte WCAG.
Accessible Rich Internet Application (ARIA)
ARIA-Spezifikationen sind eine definierte Semantik für Barrierefreiheit und wird verwendet, um barrierefreie Webumgebungen zu erstellen. Anleitungen, Muster und funktionale Beispiele finden sich unter https://www.w3.org/WAI/ARIA/apg/.
Detailliertere Informationen für vorliegendes Element:
Siehe vor allem unter „Slider/Karussell für Teaser“
UX-Writing
Was ist zu texten
- Headline
- Kurzbeschreibung
- Texte in Zusammenhang mit Bildern siehe Bild und Video
- Texte in Zusammenhang mit Verlinkungen siehe Links, Anker und Downloads
- Interaktionselemente siehe jeweils Formulare: Eingabe von Daten oder Formulare: Auswahl von Daten oder Icons
Wie ist zu texten
Es gelten die allgemeinen Regeln zu Text formulieren – interessant, verständlich und vertrauenswürdig schreiben und folgende spezifische Vorgaben:
Verschiedene Zugänge zum Texten von Teasern:
- ankündigen/anreißen – beschreibt in Kurzfassung worum es auf der verlinkten Seite geht
- Fragen – weckt konkretes Interesse und verspricht eine Beantwortung der Frage wenn man dem Link folgt
- auffordern – Nutzer direkt ansprechen – ein Versprechen oder eine Belohnung geben: …”profitieren Sie von …”
Texten von weiteren Elementen
- Texte in Zusammenhang mit Bildern siehe Bild und Video
- Texte in Zusammenhang mit Verlinkungen siehe Links, Anker und Downloads
- Interaktionselemente siehe jeweils Formulare: Eingabe von Daten oder Formulare: Auswahl von Daten oder Icons
UI-Design
Just Away
Just Away Teaser allgemein
Verwendung: Als kurzer Teaser für Produkte oder Kategorien
Varianten: der allgemeine Teaser kommt in 2 Varianten zum Einsatz, wobei sich jeweils ausschließlich die Hintergrundfarbe und die Hover-Farbe ändert.
- Hintergrundfarbe hellgrau mit Hover-Farbe „noch heller grau“
- Hintergrund weiß mit Hover-Farbe gelb
Einsatz: in einer Reihe bzw. in einem Slider kommen immer ausschließlich die eine oder die andere Variante zum Einsatz.
Just Away Produkt-Teaser 1spaltig und 2spaltig
Verwendung: als Teaser für Produktdetailseiten
Varianten: dargestellte 1spalte und 2spaltige Teaser kommen jeweils in 3 verschiedenen Varianten zum Einsatz, wobei sich jeweils nur die Hintergrundfarbe und die Hover-Farbe des gesamten Teasers ändert.
- Hintergrund weiß mit Hover-Farbe gelb und bei Aufhellung des Bildes um x %
- Hintergrund gelb, bei Hover Aufhellung des gesamten Teasers (inkl. Bild) um x %
- Hintergrund hellgrau bei Hover Aufhellung des gesamten Teasers (inkl. Bild) um x %
Einsatz: Zum Einsatz kommen diese Varianten ausschließlich abwechselnd – d.h. nie zwei mal die gleiche Variante nebeneinander.
